<template>
  <div class="waterfall-container">
    <div
      class="waterfall-column"
      v-for="(column, index) in waterfallColumns"
      :key="index"
    >
      <div class="waterfall-item" v-for="item in column" :key="item.id">
        <div class="item-content">
          <!-- 视频模块 -->
          <video
            ref="videoPlayer"
            controls
            class="item-video video"
            :style="{ height: item.height + 'px' }"
            :poster="item.imgUrl"
            webkit-playsinline
            x5-playsinline
            playsinline
            @click="playVideo"
          >
            <source :src="item.vidioUrl" type="video/mp4" />
          </video>
          <!-- 下面容器 -->
          <div>
            <div class="text-wrat mt-2" style="font-size: 12px">
              {{ item.text }}
            </div>
            <div class="text-gray-400 text-xs mt-1">
              {{ item.tag }}
            </div>
            <div>
              <div class="h-[30px] w-[100%] flex justify-between mt-2">
                <div class="flex">
                  <img
                    class="w-[20px] h-[20px] rounded-[50%]"
                    src="https://img2.baidu.com/it/u=3936429653,3346319100&fm=253&fmt=auto&app=120&f=JPEG?w=668&h=500"
                    alt=""
                  />
                  <span class="ml-2">{{ item.name }}</span>
                </div>

                <div class="flex">
                  <svg-icon name="like" width="20px" height="20px"></svg-icon
                  >{{ item.likeCount }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 视频渲染 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from "vue";
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
const videoPlayer = ref([]);

const playVideo = (event) => {
  const video = event.target;
  if (video.paused || video.ended) {
    video.play().catch((error) => {
      console.error("Error attempting to play", error);
    });
  } else {
    video.pause();
  }
};
// 瀑布流列数（根据屏幕宽度动态计算）
const columnCount = computed(() => {
  return window.innerWidth < 768 ? 2 : 3;
});
const waterfallColumns = computed(() => {
  const columns = Array.from({ length: columnCount.value }, () => []);
  props.data.forEach((item, index) => {
    columns[index % columnCount.value].push(item);
  });
  return columns;
});
</script>

<style scoped lang="scss">
/* 瀑布流样式 */
.waterfall-container {
  display: flex;
  padding: 10px;
  gap: 10px;
  .waterfall-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .waterfall-item {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      background: white;

      .item-content {
        padding: 12px;
        font-size: 14px;
        color: #333;
      }

      .item-image {
        width: 100%;
        background: linear-gradient(45deg, #f3f4f6, #e5e7eb) 100% 100%;
      }
    }
  }
}

video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.text-wrat {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  // word-break: break-word; /* 强制长单词或URL换行 */
  white-space: normal; /* 允许文本自然换行 */
  line-height: 1.5; /* 行高优化（可选） */
}

/* 隐藏video 播放按钮 */
.video::-webkit-media-controls-play-button {
  display: none;
}
</style>
